import React, { memo ,useState} from 'react'
import styled from 'styled-components';
import { connect } from "react-redux";
import { useHistory } from 'react-router-dom';
import * as actionTypes from '../../../pages/shoppingcart/store/actionCreator'
import { Container } from './style'
import './icon.css'


const Counts =styled.div`
    height: 0.36rem;
    width: 0.36rem;
    background-color: red;
    border: 1px solid #fff;
    position: absolute;
    top: 8px;
    right: 270px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
`

function BottomExhibition(props) {

  const { selectGoods, setAddGoods, goods } = props
  const [sou , setSou] = useState(0)
  // console.log(selectGoods,'////////');
  const collection = (a) =>{
    if(a == 0){
      setSou(1)
    }else{
      setSou(0)
    }

  }
  const buy = () => {
    alert('购买成功')
  }
  const history = useHistory()
  const goshoppingcart = () => {
    history.push(`/shoppingcart`)
  }

  return (
    <Container>
      <Counts style={selectGoods.length==0?{display:'none'}:{}}>{selectGoods.length}</Counts>
      <div className="first">
        <div onClick={collection.bind(null,sou)} style={sou == 0 ? {}:{color:'#ffce44'}} className="BottomExhibition-iconfont BottomExhibition-icon-31shoucang">
        </div>
        <div className="fir_title" >
          收藏
        </div>
      </div>
      <div className="second">
        <div className="BottomExhibition-iconfont BottomExhibition-icon-gouwuchekong">
        </div>
        <div className="sec_title" onClick={goshoppingcart}>
          购物车
        </div>
      </div>
      <div className="box third" onClick={setAddGoods.bind(null, goods, selectGoods)}>加入购物车</div>
      <div className="box forth" onClick={buy}>立即购买</div>
    </Container>
  )
}
const mapStateToProps = (state) => {
  return {
    selectGoods: state.shoppingCart.selectGoods
  }
}

const mapStateToDispath = (dispatch) => {
  return {
    //判断 在购物车里已经有没有该数据， 有的话，就不再继续添加样式,
    // findIndex找到 会返回原来的值，没有找到 就会返回-1
    setAddGoods(data,selectGoods) {
      if (selectGoods.findIndex((item) => item.id == data.id) == -1) {
        console.log(data, '已点击购物车');
        dispatch(actionTypes.change_selectgoods(data));
      }else{
        let index = selectGoods.findIndex((item) => item.id == data.id)
        console.log(index,'重复对象的下标');
        dispatch(actionTypes.getSelectGoodsCount(data,index))
      }
    }
  }
}

export default connect(mapStateToProps, mapStateToDispath)(memo(BottomExhibition))